<template>
	<view class="my-page">
		<!-- 用户信息卡片 -->
		<!-- <up-card :border="false" margin="20rpx" :shadow="true"> -->
			<view class="user-info">
				<image
					class="logo"
					src="/static/logo.png"
					mode="aspectFit"
				></image>
				<view class="user-name">{{
					userInfo.userName
				}}</view>
			</view>
		<!-- </up-card> -->

		<!-- 编辑表单 -->
		<up-form
			:model="formData"
			ref="formRef"
			:rules="rules"
			labelPosition="top"
			labelWidth="150"
		>
			<up-form-item
				label="真实姓名"
				prop="nickName"
				borderBottom
			>
				<up-input
					v-model="formData.nickName"
					placeholder="请输入真实姓名"
					border="none"
				></up-input>
			</up-form-item>

			<up-form-item
				label="手机号码"
				prop="phonenumber"
				borderBottom
			>
				<up-input
					v-model="formData.phonenumber"
					placeholder="请输入手机号码"
					border="none"
				></up-input>
			</up-form-item>
		</up-form>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<up-button
				type="primary"
				text="保存信息"
				@click="handleSave"
				:loading="loading"
			></up-button>
			<div style="height: 20rpx;"></div>
			<up-button
				type="error"
				text="退出登录"
				@click="showLogoutConfirm"
				marginTop="20"
			></up-button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
	getUserInfo,
	updateUserInfo,
	logout
} from "@/api/user";

// 用户信息
const userInfo = ref({
	username: "用户名",
	avatar: "/static/avatar.png",
	nickName: "",
	phonenumber: ""
});

// 表单数据
const formData = reactive({
	nickName: "",
	phonenumber: ""
});

// 表单验证规则
const rules = {
	nickName: [
		{
			required: true,
			message: "请输入真实姓名",
			trigger: "blur"
		},
		{
			min: 2,
			max: 10,
			message: "姓名长度在2-10个字符之间",
			trigger: "blur"
		}
	],
	phonenumber: [
		{
			required: true,
			message: "请输入手机号码",
			trigger: "blur"
		},
		{
			validator: (rule, value, callback) => {
				if (!/^1[3-9]\d{9}$/.test(value)) {
					callback(new Error("手机号码格式不正确"));
				} else {
					callback();
				}
			},
			trigger: "blur"
		}
	]
};

const formRef = ref(null);
const loading = ref(false);

// 加载用户信息
const loadUserInfo = async () => {
	try {
		const res = await getUserInfo();
		userInfo.value = res.data.user;
		formData.nickName = res.data.user.nickName;
		formData.phonenumber = res.data.user.phonenumber;
	} catch (error) {
		uni.showToast({
			title: "获取用户信息失败",
			icon: "none"
		});
	}
};

// 保存信息
const handleSave = async () => {
	try {
		// 表单验证
		await formRef.value.validate();
		await updateUserInfo({
			userId: userInfo.value.userId,
			userName: userInfo.value.userName,
			nickName: formData.nickName,
			phonenumber: formData.phonenumber
		});

		uni.showToast({
			title: "保存成功",
			icon: "success"
		});

		// 更新本地用户信息
		userInfo.value.nickName = formData.nickName;
		userInfo.value.phonenumber = formData.phonenumber;
	} catch (error) {
		if (error instanceof Error) {
			uni.showToast({
				title: error.message || "保存失败",
				icon: "none"
			});
		}
	} finally {
		loading.value = false;
	}
};

// 显示退出确认对话框
const showLogoutConfirm = () => {
	uni.showModal({
		title: "提示",
		content: "确定要退出登录吗？",
		success: (res) => {
			if (res.confirm) {
				handleLogout();
			}
		}
	});
};

// 退出登录
const handleLogout = async () => {
	try {
		await logout();
		// 跳转到登录页
		uni.reLaunch({
			url: "/pages/login/login"
		});
	} catch (error) {
		uni.showToast({
			title: "退出登录失败",
			icon: "none"
		});
	}
};

onMounted(() => {
	loadUserInfo();
});
</script>

<style lang="scss" scoped>
.my-page {
	padding: 20rpx;

	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;

		.user-name {
			margin-top: 20rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.action-buttons {
		margin: 40rpx 20rpx;
	}

	:deep(.u-form-item) {
		padding: 20rpx 30rpx !important;
	}
}

.logo {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 20rpx;
}
</style>
